<style lang="less" scoped>
.menu-item span {
  display: inline-block;
  overflow: hidden;
  width: 100px;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: bottom;
  transition: width 0.2s ease 0.2s;
  &:hover {
    overflow: visible;
  }
}
.menu-item i {
  transform: translateX(0px);
  transition: font-size 0.2s ease, transform 0.2s ease;
  vertical-align: middle;
  font-size: 16px;
}
.collapsed-menu span {
  width: 0px;
  transition: width 0.2s ease;
}
.collapsed-menu p {
  display: inline-block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-left: -35px;
  width: 60px;
  transition: font-size 0.2s ease 0.2s, transform 0.2s ease 0.2s;
}
.collapsed-menu i {
  transform: translateX(5px);
  transition: font-size 0.2s ease 0.2s, transform 0.2s ease 0.2s;
  vertical-align: middle;
  font-size: 22px;
}
.collapsed-menu /deep/ .ivu-menu-submenu-title-icon {
  width: 0px;
  overflow: hidden;
}
.menus {
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-around;
}
</style>

<template>
  <!-- <Scroll> -->
  <Menu
    ref="menu"
    width="auto"
    :active-name="activeName"
    :open-names="openedNames"
    theme="dark"
    @on-select="handleSelect"
    accordion
    :class="className"
  >
    <!-- <Menu-item name="首页">
      <Icon type="md-home" />
      <span>首页</span>
    </Menu-item>-->
    <Menu-item class="menus" v-for="item in menuList" :name="item.name" :key="item.id">
      <Icon :type="item.icon"></Icon>
      <span>{{item.name}}</span>
    </Menu-item>
    <!-- <Submenu id="ico" v-for="item in menuList" :name="item.name" :key="item.id">
      <template slot="title">
        <Icon :type="item.icon"></Icon>
        <span>{{item.name}}</span>
      </template>
      <Menu-item v-for="item2 in item.children" :name="item2.name" :key="item2.id">
        <p>{{item2.name.split('-')[1]}}</p>
      </Menu-item>
    </Submenu>-->
  </Menu>
  <!-- </Scroll> -->
</template>
<script>
export default {
  name: "sideMenu",
  props: {
    menuList: {
      type: Array,
      default() {
        return [];
      },
    },
    activeName: {
      type: String,
      default: "",
    },
    className: {
      type: Array,
      default: [],
    },
    isCol: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {};
  },
  computed: {
    openedNames() {
      if (this.activeName.indexOf("-") >= 0) {
        return this.activeName.split("-")[0];
      }
      return [];
    },
  },
  watch: {
    openedNames() {
      this.$nextTick(() => {
        this.$refs.menu.updateOpened();
      });
    },
  },
  methods: {
    handleSelect(name) {
      console.log(name, "on-select");
      this.$emit("on-select", name);
    },
  },
};
</script>

<style scoped>
.side-menu-wrapper {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
</style>